<template>
    <div class="hello">
        <div @click="backSheng" class="back">返回</div>
        <div ref="about" id="main" class="about" style="height:100vh;width:100%;" />
    </div>
</template>

<script>
import hebei from "./hebei.json"
// 引入 ECharts 主模块
var echarts = require("echarts/lib/echarts");

export default {
    name: 'HelloWorld',
    data() {
        return {
            mapName: 'HB',
            nowCode: "130000",
        }
    },
    mounted() {
        this.drawCharts()
    },
    created() {

    },
    methods: {
        backSheng() {
            this.nowCode = "130000"
            this.mapName = 'HB'
            
            this.drawCharts()
        },
        //  格式化地区数据
        getmapinfo(info) {
            //var re = /省|市/g; 
            // console.log(info, 'info')
            const mapData = info.map((item) => {
                //console.log(item.properties.name, 'item.properties.name')
                return {
                    value1: item.properties,
                    name: item.properties.name.replace(0, item.properties.name.length - 1),
                    value: Math.floor(Math.random() * 10),
                };
            });
            console.log(mapData, 'mapData')
            return mapData
        },
        // //获取市级别地图信息
        // goXiaCity(code, name) {
        //     //精简后用不到了
        //     var that = this
        //     that.mapName = name
        //     this.$axios.get(`https://geo.datav.aliyun.com/areas_v2/bound/${code}_full.json`).then(res => {
        //         var chart = echarts.init(this.$refs.about)
        //         echarts.registerMap(name, res.data);
        //         chart.on('click', function (params) {
        //             console.log(params, 'clickclick')
        //         });
        //         chart.setOption(that.optionMap(res));
        //     })
        // },
        optionMap(res) {
            var that = this
            console.log(res, 'optionMap')
            var mapData = that.getmapinfo(res.data.features)
            console.log(mapData, 'mapDatamapData')
            var optionMap = {
                backgroundColor: '#FFFFFF',
                tooltip: {
                    show: true,
                    trigger: 'item',
                    formatter: function (params) {
                        // console.log(params, 'params')
                        return '我是'
                            + params.data.name + '<br>' + '区域码' + params.data.value1
                                .adcode
                    }
                },
                dataRange: {
                    show: false,
                    x: 'left', //图例横轴位置
                    y: 'bottom', //图例纵轴位置 
                    splitList: [
                        { start: 0, end: 3, color: '#a67027' },
                        { start: 3, end: 6, color: '#ac4b42' },
                        { start: 6, end: 10, color: '#ff3333' },
                    ],
                    calculable: false,
                    color: ['#48D1CC', '#F0AD4E', '#ff3333']
                },
                series: [{
                    name: '数据',
                    type: "map",
                    map: that.mapName, // 这个是上面注册时的名字哦，registerMap（'这个名字保持一致'）
                    label: {
                        normal: {
                            show: true  //省份名称
                        },
                        emphasis: {
                            show: false
                        }
                    },
                    data: mapData  //数据
                }],
                title: {
                    text: '河北地图大数据',
                    subtext: '',
                    x: 'center'
                },
                geo: {
                    type: "map",
                    top: "10%",
                    bottom: "10%",
                    itemStyle: {
                        areaColor: "#2e72bf", // 地图颜色
                        borderColor: "#333", // 省分割线颜色
                    },
                    // map: "china",
                    map: 'heSheng', //名字可以自定义，但是如果是china的时候就是全国地图，china是关键字
                    roam: true,//滚轮 放大缩小
                    zoom: 1.1,
                    itemStyle: {
                        normal: {
                            borderWidth: .5, //区域边框宽度
                            borderColor: '#009fe8', //区域边框颜色
                            areaColor: "#ffefd5", //区域颜色
                        },
                        emphasis: {
                            borderWidth: .5,
                            borderColor: '#4b0082',
                            areaColor: "#ffdead",
                        }
                    },
                    label: {
                        normal: {
                            show: true, // 是否显示对应地名
                            textStyle: {
                                color: "#000",
                            },
                        },
                    },

                },
            }

            return optionMap

        },
        drawCharts() {
            var that = this
            // clean地图实例 不然下面会一直创建实例 最终卡死
            echarts.dispose(this.$refs.about)
            this.$axios.get(`https://geo.datav.aliyun.com/areas_v2/bound/${that.nowCode}_full.json`).then(res => {
              
                var chart = echarts.init(this.$refs.about)
                echarts.registerMap(that.mapName, res.data);

                chart.on('click', function (params) {
                    console.log("该地区axios")
                    // that.goXiaCity(params.data.value1.adcode, params.data.name)
                    that.nowCode = params.data.value1.adcode
                    that.mapName = params.data.name

                    if (params.data.value1.level == "district") {
                        console.log("该地区已经无法下钻")
                        alert('该地区已经无法下钻')
                        return false
                    } else {
                        that.drawCharts(params.data.value1.adcode, params.data.name)
                    }



                });

                chart.setOption(that.optionMap(res));

            });

        },
    },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style scoped>
.managingPatientSize {
    height: 100%;
    background-color: #111b41;
    color: #fff;

}

.el-row {
    height: 100%;

}

.el-col {
    height: 100%;
    position: relative;

}

#china-map {
    height: 100%;
}

.back {
    font-size: 48px;
    display: flex;
    position: absolute;
    flex-flow: row wrap;
    justify-content: left;
    align-items: center;
    margin-top: 250px;
    margin-left: 50px;
    z-index: 10;
}
</style>
